<!--
 * @Date: 2024-09-05 15:41:57
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-09-09 09:39:54
 * @Description: 表格分页配置
-->
<template>
  <div class="widget-config-setting">
    <div class="setting-name">分页配置</div>
    <div class="setting-body">
      <el-form-item label="是否启用">
        <el-switch v-model="pagerConfig.enabled"></el-switch>
      </el-form-item>
      <template v-if="pagerConfig.enabled">
        <el-form-item label="每页大小">
          <el-input-number style="width: 100%;" v-model="pagerConfig.pageSize"></el-input-number>
        </el-form-item>
        <el-form-item label="对齐方式">
          <el-select v-model="pagerConfig.align" >
            <el-option
              v-for="item in alignOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="页码列表">
            <el-select
              class="pagesizes-select"
              multiple
              :multiple-limit="5"
              v-model="pagerConfig.pageSizes"
              @change="pageSizesChange"
            >
              <el-option
                v-for="item in pageSizeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
        </el-form-item>
      </template>
    </div>
  </div>
</template>

<script setup name="pagerConfig-editor">
import { reactive, computed } from 'vue';

const props = defineProps({
  // 设计器信息
  designer: { type: Object },
  // 组件选项信息
  optionModel: { type: Object },
  // 当前选中的组件
  selectedWidget: { type: Object },
});

// 默认属性
const defConfig = {
  align: 'right',
  enabled: true,
  pageSize: 20,
  pageSizes: [10, 20, 50, 100],
}
// 表格的配置
const pagerConfig = computed(() => {
  if (!props.optionModel.pagerConfig) {
    props.optionModel.pagerConfig = defConfig
  }
  return props.optionModel.pagerConfig
})

// 对齐方式选项
const alignOptions = reactive([
  { label: '左侧', value: 'left' },
  { label: '居中', value: 'center' },
  { label: '右侧', value: 'right' },
])

// 页面列表选项
const pageSizeOptions = reactive([
  { label: '10', value: 10 },
  { label: '15', value: 15 },
  { label: '20', value: 20 },
  { label: '25', value: 25 },
  { label: '30', value: 30 },
  { label: '35', value: 35 },
  { label: '40', value: 40 },
  { label: '45', value: 45 },
  { label: '50', value: 50 },
  { label: '60', value: 60 },
  { label: '70', value: 70 },
  { label: '80', value: 80 },
  { label: '90', value: 90 },
  { label: '100', value: 100 },
  { label: '150', value: 150 },
  { label: '200', value: 200 },
])
/**
 * 页码下拉改变时的方法
 * @param values 页码数据
 */
const pageSizesChange = (values) => {
  // 数据排序
  values = values.sort((a, b) => { return a - b })
  pagerConfig.value.pageSizes = values
}

</script>

<style lang="scss" scoped>
.pagesizes-select {
  // 处理页码下拉多选不换行
  :deep(.el-select__selection) {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}
</style>
